<template>
	<view class="mine-integral">
		<view class="data-area">
			<view class="text">我的积分</view>
			<view class="num">3,292</view>
			<navigator url="/pages/lease/points-details" class="detailed-btn" hover-class="none">积分明细</navigator>
		</view>
		<image src="../../static/images/icon/zanjifen.png" class="pic"></image>
		
		<view class="share-area">
			<view class="item">
				<view class="explain">
					<image src="../../static/images/icon/share1.png" class="item-pic"></image>
					<view class="item-M">
						<view class="m-top">邀请好友</view>
						<view class="m-btm">邀请好友注册，每成功注册1人送10积分</view>
					</view>
				</view>
				<view class="item-R">邀请好友</view>
			</view>
			<view class="item">
				<view class="explain">
					<image src="../../static/images/icon/share2.png" class="item-pic"></image>
					<view class="item-M">
						<view class="m-top">每日分享</view>
						<view class="m-btm">每日分享商品，即可获得2积分</view>
					</view>
				</view>
				<view class="item-R">立即分享</view>
			</view>
			<view class="item">
				<view class="explain">
					<image src="../../static/images/icon/share3.png" class="item-pic"></image>
					<view class="item-M">
						<view class="m-top">下单送积分</view>
						<view class="m-btm">每成功下单一次，可获得10积分</view>
					</view>
				</view>
				<view class="item-R">我去下单</view>
			</view>
		</view>
		
		<view class="recommend">
			<image src="../../static/images/icon/brand-left.jpg" class="brand"></image>
			<view class="main-title">为您推荐</view>
			<image src="../../static/images/icon/brand-right.jpg" class="brand"></image>
		</view>
		
		<!-- <view class="goods-list">
			<view class="item">
				<image src="../../../../static/images/icon/recommend.png" class="recommend-pic"></image>
				<view class="describe m-ellipsis">豆柴猫粮肠胃健康原动力真鲜肉高活菌全价冻菌全价冻</view>
				<view class="data">
					<text class="num">2100</text>
					<text>积分</text>
				</view>
				<view class="btn un">库存不足</view>
			</view>
			<view class="item">
				<image src="../../../../static/images/icon/recommend.png" class="recommend-pic"></image>
				<view class="describe m-ellipsis">豆柴猫粮肠胃健康原动力真鲜肉高活菌全价冻菌全价冻</view>
				<view class="data">
					<text class="num">2100</text>
					<text>积分</text>
				</view>
				<view class="btn">立即兑换</view>
			</view>
			<view class="item">
				<image src="../../../../static/images/icon/recommend.png" class="recommend-pic"></image>
				<view class="describe m-ellipsis">豆柴猫粮肠胃健康原动力真鲜肉高活菌全价冻菌全价冻</view>
				<view class="data">
					<text class="num">2100</text>
					<text>积分</text>
				</view>
				<view class="btn">立即兑换</view>
			</view>
		</view> -->
	</view>
	
</template>

<script>
	
</script>

<style lang="scss">
	.mine-integral {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230517/024d4b913481a724c5b421fe560c9c34.png');
		background-repeat: no-repeat;
		background-size: 100%;
		padding: 0 24rpx;
		background-color: #F5F7FA;
		
		.data-area {
			padding-top: 224rpx;
			color: #ffffff;
			
			.text {
				font-size: 28rpx;
				font-weight: bold;
			}
			
			.num {
				font-size: 80rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 80rpx;
				margin: 24rpx 0 32rpx 0;
			}
			
			.detailed-btn {
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				border-radius: 36rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 24rpx;
			}
		}
		
		.pic {
			width: 304rpx;
			height: 40rpx;
			margin-top: 80rpx;
		}
		
		.share-area {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 48rpx;
				
				.explain {
					display: flex;
					
					.item-pic {
						width: 80rpx;
						height: 80rpx;
					}
					
					.item-M {
						margin-left: 16rpx;
						
						.m-top {
							font-size: 32rpx;
							font-weight: bold;
							color: #1F1F1F;
							line-height: 32rpx;
						}
						
						.m-btm {
							margin-top: 24rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 24rpx;
						}
					}
				}
				
				.item-R {
					width: 144rpx;
					height: 72rpx;
					line-height: 72rpx;
					background: linear-gradient(135deg, #FF6C48 0%, #FF2937 100%);
					border-radius: 36rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
		
		.recommend {
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image {
				width: 32rpx;
				height: 32rpx;
			}
			
			.main-title {
				margin: 0 8rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
		}
		
		.goods-list {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			flex-wrap: wrap;
			
			.item {
				position: relative;
				width: 340rpx;
				background-color: #ffffff;
				margin-bottom: 24rpx;
				border-radius: 16rpx;
				
				.recommend-pic {
					width: 340rpx;
					height: 340rpx;
				}
				
				.describe {
					padding: 0 16rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					font-weight: bold;
					color: #1F1F1F;
					overflow:hidden;
					text-overflow : ellipsis;
					letter-spacing: 2rpx;
				}
				
				.data {
					margin-top: 22rpx;
					padding: 0 16rpx;
					color: #FF1F2E;
					vertical-align: text-bottom;
					
					.num {
						font-weight: bold;
						font-size: 48rpx;
						margin-right: 8rpx;
					}
				}
				
				.btn {
					width: 308rpx;
					height: 76rpx;
					line-height: 76rpx;
					background: rgba(57,204,194,0.08);
					border-radius: 8rpx;
					font-weight: bold;
					color: #39CCC2;
					text-align: center;
					margin: 34rpx auto 24rpx auto;
					
					&.un {
						background: #F5F7FA;
						color: #B8B8B8;
						
						&::before {
							content: "已抢光";
							position: absolute;
							top: 284rpx;
							left: 0;
							width: 100%;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							background: rgba(0,0,0,0.56);
							color: #fff;
							font-weight: normal;
						}
					}
				}
			}
		}
	}
</style>